<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport"
			content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>长途客运售票系统客户端</title>
		<link href="css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" href="css/style.css">
		<link rel="stylesheet" type="text/css" href="css/iconfont.css" />
		<link rel="stylesheet" type="text/css" href="css/app.css" />
		<link rel="stylesheet" type="text/css" href="css/mui.picker.min.css" />
	</head>
	<body>
		<div id="app" v-cloak>
			<header class="mui-bar mui-bar-nav" style="padding-right: 15px;" v-if="needHead">
				<h1 class="mui-title">长途客运售票系统客户端</h1>
			</header>
			<div class="mui-content">
				<div v-if="needReg">
					<form class="mui-input-group">
						<div class="mui-input-row">
							<label>用户名</label>
							<input type="text" class="mui-input-clear mui-input" placeholder="请输入用户名"
								v-model="username">
						</div>
						<div class="mui-input-row">
							<label>密码</label>
							<input type="password" class="mui-input-clear mui-input" placeholder="请输入密码"
								v-model="password">
						</div>
						<div class="mui-input-row">
							<label>确认</label>
							<input type="password" class="mui-input-clear mui-input" placeholder="请确认密码"
								v-model="againPassword">
						</div>
					</form>
					<div class="mui-content-padded">
						<div class="link-area">已有账号？<a @click="goLogin">去登录</a>
						</div>
						<button class="mui-btn mui-btn-block mui-btn-primary" @click="reg">注册</button>
					</div>
				</div>
				<div v-if="needLogin">
					<form class="mui-input-group">
						<div class="mui-input-row">
							<label>用户名</label>
							<input type="text" class="mui-input-clear mui-input" placeholder="请输入用户名"
								v-model="username">
						</div>
						<div class="mui-input-row">
							<label>密码</label>
							<input type="password" class="mui-input-password mui-input" placeholder="请输入密码"
								v-model="password">
						</div>
					</form>
					<div class="mui-content-padded">
						<div class="link-area"><a @click="goReg">注册账号</a>
						</div>
						<button class="mui-btn mui-btn-block mui-btn-primary" @click="login">登录</button>
					</div>
				</div>
				<div v-if="isLogin">
					<div v-if="onHome">
						<div class="mui-slider">
							<div class="mui-slider-group mui-slider-loop">
								<div class="mui-slider-item mui-slider-item-duplicate"><a href="#"><img
											src="img/4.jpg" /></a></div>
								<div class="mui-slider-item"><a href="#"><img src="img/1.jpg" /></a></div>
								<div class="mui-slider-item"><a href="#"><img src="img/2.jpg" /></a></div>
								<div class="mui-slider-item"><a href="#"><img src="img/3.jpg" /></a></div>
								<div class="mui-slider-item"><a href="#"><img src="img/4.jpg" /></a></div>
								<div class="mui-slider-item mui-slider-item-duplicate"><a href="#"><img
											src="img/1.jpg" /></a></div>
							</div>
						</div>
						<div style="text-align: center;margin: 50px 0;">
							<hr>
							<h3 @click="showSta">线路：{{sta}}</h3>
							<hr>
							<h3 @click="showDate">日期：{{date}}</h3>
							<hr>
						</div>
						<button class="mui-btn mui-btn-block" @click="selSequ">查询</button>
					</div>
					<div v-if="onSequ">
						<ul class="mui-table-view">
							<li v-if="hasData" v-for="item in sequArr" class="mui-table-view-cell"
								@click="showPay(item.sequenceId,item.startTime,item.endTime,item.busLine.startStation,item.busLine.endStation,item.busLine.ticketPrice)">
								<div style="float: left;margin-left: 50px;">
									<h4><span style="border-color:blue;border-style: solid;">起</span> {{item.startTime}}
										{{item.busLine.startStation}}
									</h4>
									<br>
									<h4><span style="border-color:red;border-style: solid;">终</span> {{item.endTime}}
										{{item.busLine.endStation}}
									</h4>
								</div>
								<div style="float: right;margin-right: 50px;">
									<h3 style="color: red;text-align: center;font-weight: normal;">
										¥{{item.busLine.ticketPrice}}</h3>
								</div>
							</li>
						</ul>
					</div>
					<div v-if="onPay">
						<div class="box">
							<div class="col1">{{startSta}}</div>
							<div class="col2">
								<div class="time">{{startTime}}</div>
								<div class="arrow">
									<img src="img/arrow.png" alt="">
								</div>
								<div class="date">{{fullDate}}</div>
							</div>
							<div class="col3">{{endSta}}</div>
						</div>
						<div class="price">
							<div style="padding-right: 20px;">票价：¥{{price}}</div>
						</div>
						<div class="btn_div">
							<div style="display:flex;margin-right: 20px;">
								<h3 @click="showNum">购票数量：{{num}}【点击选择】</h3>
							</div>
						</div>
						<div class="total">
							支付金额：¥ <span id="totalMoney">{{payMoney}}</span>
						</div>
						<div class="pay_btn">
							<button @click="pay">支付</button>
						</div>
					</div>
					<div v-if="onOrder">
						<ul class="mui-table-view" v-if="hasOrder"
							style="margin-bottom: 60px;background-color: rgb(239,239,244);">
							<li v-for="item in orders">
								<div
									style="border:1px solid dodgerblue;border-radius: 15px; margin: 10px;padding: 10px;">
									<p>订单号:{{item.orderId}}</p>
									<h4>{{item.startStation}} ---> {{item.endStation}}&nbsp;&nbsp;
										<span style="color: red">￥{{item.amount}}</span>&nbsp;&nbsp;{{item.orderState}}
										<span v-if="item.orderState=='未支付'" style="float: right;">
											<button @click="payAgain(item.orderId,item.amount)">付款</button>
										</span>
									</h4>
									<p>发车时间：{{item.startData}}</p>
									<p>下单时间：{{item.createTime}}</p>
								</div>
							</li>
						</ul>
						<div v-if="!hasOrder" style="text-align: center;">
							<br><br>
							<h1>您当前暂无订单</h1>
							<button class="mui-btn" @click="goHome">去下单</button>
						</div>
					</div>
					<div v-if="onMy">
						<div style="text-align: center;">
							<br>
							<h1>您好，{{username}}</h1>
							<br>
							<h4>钱包余额：￥{{money}}</h4>
							<br>
						</div>
						<button class="mui-btn mui-btn-block mui-btn-primary" @click="getMoney">充值</button>
						<button class="mui-btn mui-btn-warning mui-btn-block" @click="goUpdPwd">修改密码</button>
						<button class="mui-btn mui-btn-red mui-btn-block" @click="logout">退出登录</button>
					</div>
					<div v-if="onUpdPwd">
						<form class="mui-input-group">
							<div class="mui-input-row">
								<label>用户名</label>
								<input type="text" class="mui-input-clear mui-input" disabled="disabled"
									v-model="username">
							</div>
							<div class="mui-input-row">
								<label>原密码</label>
								<input type="password" class="mui-input-clear mui-input" placeholder="请输入密码"
									v-model="password">
							</div>
							<div class="mui-input-row">
								<label>新密码</label>
								<input type="password" class="mui-input-clear mui-input" placeholder="请输入密码"
									v-model="newPassword">
							</div>
							<div class="mui-input-row">
								<label>确认</label>
								<input type="password" class="mui-input-clear mui-input" placeholder="请输入密码"
									v-model="againPassword">
							</div>
						</form>
						<div class="mui-content-padded">
							<button class="mui-btn mui-btn-block mui-btn-primary" @click="updPwd">修改密码</button>
						</div>
					</div>
				</div>
			</div>
			<footer v-if="needFoot" style="background-color:rgb(247,247,247,1)">
				<div @click="goHome"><i :class="onHome?'shouye':'shouye2'"></i><br>首页</div>
				<div @click="goOrder"><i :class="onOrder?'dingdan':'dingdan2'"></i><br>订单</div>
				<div @click="goMy"><i :class="onMy?'wode':'wode2'"></i><br>我的</div>
			</footer>
		</div>
	</body>
	<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/axios.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/main.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/mui.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/mui.picker.min.js" type="text/javascript" charset="utf-8"></script>
</html>
